﻿<div class="demo-description" id="BindToCustomDataTypes">
    <h2><DemoNavLink Link="CheckBox#BindToCustomDataTypes" />CheckBox - Bind to Custom Data Types</h2>
    <p>
        The <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxCheckBox-1">CheckBox</a> allows you to bind its states (check, uncheck, indeterminate) to custom data types. This module demonstrates how to bind the component to an Enum object.
        <ul>
            <li>
                <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxCheckBox-1.ValueChecked">ValueChecked</a> - Specifies a value that is considered as Checked.
            </li>
            <li>
                <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxCheckBox-1.ValueUnchecked">ValueUnchecked</a> - Specifies a value that is considered as Unchecked.
            </li>
            <li>
                <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxCheckBox-1.ValueIndeterminate">ValueIndeterminate</a> - Specifies a value that is considered as Indeterminate.
            </li>
        </ul>
        A value is considered as Indeterminate if it is not equal to the specified properties.
    </p>
</div>

<div class="card demo-card demo-card-sm">
    <div class="card-body">
        <DxCheckBox @bind-Checked="@Value" AllowIndeterminateStateByClick CssClass="mb-1"
                    ValueChecked="@Opinion.Yes" ValueUnchecked="@Opinion.No" ValueIndeterminate="@Opinion.Abstain">@GetText()</DxCheckBox>
        <DxCheckBox Checked="Opinion.Yes" Enabled="false" CssClass="mb-1"
                    ValueChecked="@Opinion.Yes" ValueUnchecked="@Opinion.No" ValueIndeterminate="@Opinion.Abstain">Disabled Checked</DxCheckBox>
        <DxCheckBox Checked="Opinion.No" Enabled="false" CssClass="mb-1"
                    ValueChecked="@Opinion.Yes" ValueUnchecked="@Opinion.No" ValueIndeterminate="@Opinion.Abstain">Disabled Unchecked</DxCheckBox>
        <DxCheckBox Checked="Opinion.Abstain" Enabled="false" CssClass="mb-1"
                    ValueChecked="@Opinion.Yes" ValueUnchecked="@Opinion.No" ValueIndeterminate="@Opinion.Abstain">Disabled Indeterminate</DxCheckBox>
    </div>
</div>

@code{
    enum Opinion { Yes, No, Abstain }
    Opinion Value = Opinion.Abstain;

    string GetText() {
        if(Value == Opinion.Yes) return "Checked";
        if(Value == Opinion.No) return "Unchecked";
        return "Indeterminate";
    }
}

<CodeSnippet_Editor_CheckBox_BindToEnum/>
